<!DOCTYPE html>
<html>
<!--
              .======.
              |偷代码|
              |      |
              |死全家|
     .========'      '========.
     |   _      xxxx      _   |
     |  /_;-.__ / _\  _.-;_\  |
     |     `-._`'`_/'`.-'     |
     '========.`\   /`========'
              | |  / |
              |/-.(  |
              |\_._\ |
              | \ \`;|
              |  > |/|
              | / // |
              | |//  |
              | \(\  |
              |  ``  |
              |      |
              |      |
              |      |
              |      |
  \\    _  _\\| \//  |//_   _ \// _
 ^ `^`^ ^`` `^ ^` ``^^`  `^^` `^ `^
-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>测试页面 - MC Skin Maker</title>
		<link rel="icon" type="image/png" href="images/favicon.ico" sizes="192x192">
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
		<link rel="stylesheet" href="styles/main.css">

		<style></style>
	</head>

	<body class="hold-transition skin-purple layout-top-nav">
<!--
		X   X   XXX       XXX   X     X            X   X                X                
		XX XX  X   X     X      X                  XX XX                X                
		X X X  X          XXX   X  X  X  XXXX      X X X    XXX  X XX   X  X  XXX   X XX 
		X   X  X             X  X X   X  X   X     X   X      X  XX  X  X X  X   X  XX  X
		X   X  X             X  XX    X  X   X     X   X   XXXX  X      XX   XXXXX  X    
		X   X  X   X     X   X  X X   X  X   X     X   X  X   X  X      X X  X      X    
		X   X   XXX       XXX   X  X  X  X   X     X   X   XXXX  X      X  X  XXXX  X    
-->
		
		<div class="wrapper">
			<div id="pagebg"></div>
			<header class="main-header">
				<nav class="navbar navbar-static-top">
					<div class="container">
						<div class="navbar-header">
							<a href="#" class="navbar-brand">MC Skin Marker</a><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"><i class="fa fa-bars"></i></button></div>
						<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
							<ul class="nav navbar-nav">
								<li class="" id="to-make" data-toggle="tooltip" data-placement="bottom" title="切换至绘制界面">
									<a>制作皮肤</a>
								</li>
								<li class="active" id="to-view" data-toggle="tooltip" data-placement="bottom" title="切换至浏览界面">
									<a>浏览皮肤</a>
								</li>
							</ul>
						</div>
						<div class="navbar-custom-menu">
							<ul class="nav navbar-nav">
								<li>
									<a id="new-skin"><i class="fa fa-file-photo-o" aria-hidden="true"></i> <span class="description-text">制作新皮肤</span></a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
			</header>
			<div class="content-wrapper">
				
				
<!--
				   _==/          i     i          \==_
			     /XX/            |\___/|            \XX\
			   /XXXX\            |XXXXX|            /XXXX\
			  |XXXXXX\_         _XXXXXXX_         _/XXXXXX|
			 XXXXXXXXXXXxxxxxxxXXXXXXXXXXXxxxxxxxXXXXXXXXXXX
			|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
			XXXXXXXXXXXXXXXXXXXX 皮肤浏览 XXXXXXXXXXXXXXXXXXXX
			|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
			 XXXXXX/^^^^"\XXXXXXXXXXXXXXXXXXXXX/^^^^^\XXXXXX
			  |XXX|       \XXX/^^\XXXXX/^^\XXX/       |XXX|
			    \XX\       \X/    \XXX/    \X/       /XX/
			       "\       "      \X/      "      /"
-->


				<div class="container viewer">
					<section class="content-header">
						<h1>浏览皮肤</h1></section>
					<section class="content">
						<div class="row">
							<div class="col-md-8">
								<div class="box box-primary">
									<div class="box-header with-border">
										<h3 class="box-title" style="width:100%">3D浏览
										<span id="textures-indicator" data-toggle="tooltip" title="" class="badge bg-light-blue"></span>
										<div class="operations">
										<i data-toggle="tooltip" data-placement="bottom" title="背景" class="glyphicon glyphicon-picture cbg"></i>
										<i data-toggle="tooltip" data-placement="bottom" title="行走" class="fa fa-pause"></i> 
										<i data-toggle="tooltip" data-placement="bottom" title="奔跑" class="fa fa-forward"></i> 
										<i data-toggle="tooltip" data-placement="bottom" title="旋转" class="fa fa-repeat"></i>
										</div>
										</h3>
									</div>
									<div class="box-body">
										<div id="skinpreview" style="background-size:cover;"></div>
									</div>
									<script type="text/javascript" src="scripts/three.min.js"></script>
									<script type="text/javascript" src="scripts/three.msp.js"></script>
									<script>
										var dskin = "";
										MSP.changeSkin(dskin);
									</script>
									<div class="box-footer"><button title="保存静帧至本地" class="btn btn-primary pull-right picdownload">保存该图片</button></div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="box box-primary">
									<div class="box-header with-border">
										<h3 class="box-title">皮肤信息</h3></div>
									<div class="box-body">
										<table class="table">
											<tbody>
												<tr>
													<td>名称</td>
													<td id="name">--</td>
												</tr>
												<tr>
													<td>适用模型</td>
													<td>steve</td>
												</tr>
												<tr>
													<td>Base64 <i class="fa fa-question-circle" title="右键另存为即可下载原始皮肤文件" data-toggle="tooltip" data-placement="top"></i></td>
													<td>
														<a href="#" title="--">--</a>
													</td>
												</tr>
												<tr>
													<td>皮肤大小</td>
													<td>-- KB</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="box box-default">
									<div class="box-header with-border">
										<h3 class="box-title">待定</h3></div>
									<div class="box-body"></div>
								</div>
							</div>
						</div>
					</section>

				</div>


<!--
				 ,--^----------,--------,-----,-------^--,
				  | |||||||||   `--------'     |          O  ---皮肤制作---
				  `+---------------------------^----------|
				    `\_,-------, _________________________|
				      / XXXXXX /`|     /
				     / XXXXXX /  `\   /
				    / XXXXXX /\______(  
				   / XXXXXX /
				  / XXXXXX /
				 (________(
				  `------'  
-->


				<div class="container maker" style="display: none;">
					<section class="content-header">
						<h1>制作皮肤</h1></section>
					<section class="content">
						<div class="row">
							<div class="col-md-8">
								<div class="box box-primary">
									<div class="box-header with-border">
										<h3 class="box-title" style="width:100%">绘制区域
										<span id="textures-indicator" data-toggle="tooltip" title="" class="badge bg-light-blue"></span>
										</h3>
									</div>
									<div class="box-body drawbody">
										<canvas id="draw"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="box box-primary">
									<div class="box-header with-border">
										<h3 class="box-title">绘制工具</h3></div>
									<div class="box-body">

									</div>
								</div>
							</div>
						</div>
					</section>
				</div>

			</div>
			<footer class="main-footer" style="z-index: 100;position: inherit">
				<div class="container">
					<div id="copyright-text" class="pull-right hidden-xs">Powered with ❤ by
						<a class="my-face" href="http://www.daidou.pw/lastfire">LastFire Server</a>.</div><strong>Copyright © 2015-2017. <a class="my-face" href="http://www.daidou.pw">DaiDR(●'◡'●)ﾉ♥</a> All rights reserved.</strong></div>
			</footer>
		</div>
		<script type="text/javascript" src="scripts/font.min.js"></script>
		<script type="text/javascript" src="scripts/skin.js"></script>
		<script>
			$(".picdownload").click(function() {
				alert("由于浏览器限制，请使用截图软件截取。")
			});
		</script>
		<script>
			MSP.changeSkin("test.png"), $(function() {
				$("input").iCheck({
					checkboxClass: "icheckbox_square-blue",
					radioClass: "iradio_square-blue"
				}), $('[for="private"]').tooltip()
			}), $(document).ready(TexturePreview.init3dPreview), $(window).resize(TexturePreview.init3dPreview);
		</script>
		<script>
			function windowssize1() {
				$("#skinpreview").css("height", $("#skinpreview").width() / 3 * 2);
				
			}
			windowssize1();
			$(".navbar").height() > 50 && $(".description-text").hide(), $(window).resize(windowssize1);
		</script>
		<script src="scripts/particles.js"></script>
		<script type="text/javascript" src="scripts/main.js"></script>
		<script type="text/javascript" src="scripts/consoletip.js"></script>
	</body>

</html>